<template>
  <div>
    <!-- <Player /> -->
    <vue-particles
      color="#00FFFF"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="star"
      :particleSize="5"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <BlogHeader />
    <router-view> </router-view>
  </div>
</template>

<script>
import Player from "zw-player";
import BlogHeader from "@/components/Blog/BlogHeader.vue";
import BlogMain from "@/components/Blog/BlogMain.vue";
export default {
  components: {
    Player,
    BlogHeader,
    BlogMain,
  },
  mounted() {
    window.addEventListener("scroll", this.menu);
  },
  methods: {
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      console.log(this.scroll);
    },
  },
};
</script>

<style lang="less" scoped>
#particles-js {
  position: fixed;
  z-index: 0;
  top: 0;
  width: 100%;
}
</style>
